<template>
	<view>
		<swiper class="swiper" indicator-color="rgba(255,255,255,0.8)" indicator-active-color="rgba(255,255,255,1)"
		 :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(i,k) in goods.picture" :key="k">
				<view class="swiper-item">
					<image class="img" :src="i" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="info">
			<view class="name">
				{{goods.goods_name}}
			</view>

			<view class="price padding-tb-xs margin-bottom-sm">
				<view class="cu-tag bg-orange sm margin-right">
					会员价
				</view>
				<view class="text-price text-xxl text-red text-cut margin-right">
					{{attr_selected.attr_price}}
				</view>
				<view class="text-price text-sm text-gray text-cut margin-right old">
					{{attr_selected.original_price}}
				</view>
			</view>

			<view class="text-gray subinfo">
				<view>运费:0.00</view>
				<view>规格:{{attr_selected.attr_name}}</view>
				<view>库存:{{attr_selected.attr_store}}件</view>
			</view>
		</view>
		
		<u-parse :html="goods.detail"></u-parse>

		<view class="footer">
			<view class="left" @click="toCart">
				加入购物车
			</view>
			<view class="right" @click="buyNow">
				立即购买
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" @change="cgMask">
			<view class="specs">
				<view class="top">
					<image class="img" :src="goods.full_thumbnail" mode="aspectFill"></image>
					<view class="info">
						<view class="price">￥{{attr_selected.attr_price}}</view>
						<view class="number">数量：{{num}}个</view>
						<view class="spec">规格：{{attr_selected.attr_name}}</view>
					</view>
				</view>
				<view class="form">
					<view>规格</view>
					<view class="taglist">
						<view class='cu-tag' :class="{ on: i.id==attr_selected.id }" v-for="i in attr" :key="i.id" @click="cgAttr(i.id)">{{i.attr_name}}</view>
					</view>
					<view class="number">
						<view>购买数量</view>
						<uni-number-box @change="cgNum"></uni-number-box>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: {},
				attr: '',
				attr_selected: '',
				num: 1,
				mask: false
			}
		},
		computed: {
			
		},
		onLoad(opt) {
			this.getDetail(opt.id);
		},
		methods: {
			cgMask(e) {
				this.mask = e.show
			},
			toCart() {
				if (this.mask) {
					this.$u.post('/goods/cart', {
						goods_id: this.goods.id,
						goods_attr_id: this.attr_selected.id,
						goods_num: this.num
					}).then(res => {
						this.$msg('操作成功')
						setTimeout(() => {
							this.$goto('/pages/shop/main?tab=cart')
						}, 1000)
					})
				} else {
					this.$refs.popup.open()
					this.mask = true
				}
			},
			buyNow() {
				if (this.mask) {
					this.creatOrder();
				} else {
					this.$refs.popup.open()
					this.mask = true
				}
			},
			getDetail(id) {
				this.$u.get('/goods/detail?goods_id='+id).then(res => {
					let data = res.data.result.goods
					this.goods = data
					this.attr = data.goods_attr
					this.attr_selected = data.goods_attr[0]
				})
			},
			cgAttr(id) {
				this.attr_selected = this.attr.find(item => item.id == id)
			},
			cgNum(e) {
				this.num = e
			},
			creatOrder() {
				this.$u.post('/orders/create', {
					type: 'direct',
					goods_id: this.goods.id,
					attr_id: this.attr_selected.id,
					quantity: this.num
				}).then(res => {
					console.log(res)
					if (res.data.code == -2) {
						uni.showModal({
							title: '提示',
							content: '还没添加收货地址，前往添加？',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/mine/address'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					} else {
						if (res.data.result.trade_no) {
							this.$goto('/pages/order/order-create?no='+res.data.result.trade_no)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		padding-bottom: 100rpx;
	}

	.swiper {
		height: 600rpx;

		.img {
			width: 100%;
			height: 600rpx;
		}
	}

	.info {
		padding: 20rpx 40rpx;

		.name {
			margin: 20rpx 0;
			font-size: 40rpx;
		}

		.price {
			display: flex;
			align-items: center;

			.cu-tag {
				padding: 8rpx !important;
				font-size: 18rpx;
				height: 32rpx;
			}

			.old {
				text-decoration: line-through;
			}
		}

		.subinfo {
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}
	}

	.detail {
		image {
			width: 100%;
		}
	}

	.footer {
		height: 100rpx;
		display: flex;
		font-size: 30rpx;
		letter-spacing: 4rpx;
		color: #fff;
		position: fixed;
		z-index: 300;
		bottom: 0;
		width: 100%;

		.left {
			flex: 1;
			background-color: #9197A5;
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
		}

		.right {
			flex: 1;
			background-color: #1F1F1F;
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
		}
	}

	.specs {
		padding-bottom: 100rpx;
		height: 60vh;
		background-color: #fff;

		.top {
			padding: 0 40rpx;
			position: relative;
			font-size: 26rpx;
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #DFDFDF;

			.img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				background: #fff;
				box-shadow: 1px 1px 5px #E6E5E5, -1px -1px 5px #E6E5E5;
				margin-top: -20rpx;
			}

			.info {
				padding: 0 30rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
			}

			.price {
				margin: 10rpx -6rpx;
				font-size: 30rpx;
			}
		}

		.form {
			padding: 30rpx;
			font-size: 30rpx;
			font-weight: 600;

			.taglist {
				padding: 30rpx 0;

				.cu-tag {
					margin-right: 20rpx;
					&.on {
						border: 4rpx solid #e4cb9b;
					}
				}
			}

			.number {
				margin: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
	.detail {
		img {
			width: 100%;
		}
	}
</style>
